import React from 'react'
import { List, Button, Skeleton, message, Avatar } from 'antd'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import moment from 'moment'
import style from './Message.module.less'
import DetailModal from '../../LetterManage/DetailModal'

class MessageBlock extends Component {
  state = {
    letterList: [],
    letterData: {},
    letterDetailVisible: false
  }

  formatDate (date) {
    if (!date) {
      return date
    }
    return moment(date * 1000).format('YYYY-MM-DD HH:mm')
  }

  // 前往信访管理页面
  openLetterList () {
    this.props.addWindow({ id: 'LetterManage', title: '信访管理', componentName: 'LetterManage' })
  }

  // 获取信访列表
  getLetterList () {
    this.setState({ loading: true })
    this.$get('/api/xapc/feedback', {
      page_size: 8,
      current: 1
    }).then(res => {
      this.setState({ loading: false })
      if (res.status !== 1) {
        return message.warning(res.message)
      }
      this.setState({
        letterList: res.data.list
      })
    }).catch(() => this.setState({ loading: false }))
  }

  // 获取信访详情
  getLetterDetail (id) {
    const hide = message.loading('加载中', 120)
    this.$get(`/api/xapc/feedback/${id}`)
      .then(res => {
        hide()
        if (res.status !== 1) {
          return message.warning(res.message)
        }
        const d = { letterData: res.data, letterDetailVisible: true }
        this.setState(d)
      }).catch(() => hide())
  }

  componentDidMount () {
    this.getLetterList()
  }

  renderAvatar (item, i) {
    let name = item.operator || ''
    const arr = [style.avatar]
    if (item.color) {
      arr.push(style[item.color])
    }
    if (name && name.length > 2) {
      name = name.slice(name.length - 2)
    }
    if (item.ico) {
      return (
        <Avatar shape='square' size={40} className={arr.join(' ')} src={item.ico} />
      )
    }
    return (
      <Avatar shape='square' size={40} className={arr.join(' ')}>{name}</Avatar>
    )
  }

  render () {
    const { letterDetailVisible, letterData } = this.state
    return (
      <div className={style.container}>
        <DetailModal visible={letterDetailVisible} data={letterData} hide={() => this.setState({ letterData: {}, letterDetailVisible: false })} />
        <div className={style['block-title']}>
          <div className={style['block-left-title']}>
            <div className={`${style['toggle-title-btn']} ${style.active}`}>
              <span>信访列表</span>
            </div>
          </div>
          <div className={style.btn} onClick={() => this.openLetterList()}>全部信访</div>
        </div>
        <div className={style['message-list']}>
          <List
            itemLayout='horizontal' loading={this.state.messageLoading} dataSource={this.state.letterList} pagination={false} renderItem={(item, i) => {
              return (
                <List.Item className={style['message-line']} actions={[<Button key='deal' type='link' onClick={() => this.getLetterDetail(item.id)}>查看</Button>]}>
                  <Skeleton avatar title={false} loading={item.loading} active>
                    <List.Item.Meta
                      avatar={this.renderAvatar(item, i)}
                      title={<span className={style['item-name']} onClick={() => this.getLetterDetail(item.id)}>{item.caseno_desc || '无'}</span>}
                      description={`${item.remark.length > 30 ? item.remark.slice(0, 30) + '...' : item.remark} ${this.formatDate(item.create_datetime)}`}
                    />
                  </Skeleton>
                </List.Item>
              )
            }}
          />
        </div>
      </div>
    )
  }
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(MessageBlock)
